<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>支付</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css">
<link rel="stylesheet" type="text/css" href="../css/aui-slide.css">
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css">
<link rel="stylesheet" type="text/css" href="../css/my.css">
<link rel="stylesheet" type="text/css" href="../css/index.css">
<style type="text/css">
header.aui-bar-nav{
  background:white;
}
.aui-bar-nav a{
  color:black;width: 100%;text-align: center;
}
.aui-bar-nav div{
  width:100px;margin: 0 auto;font-size: 1rem;
}
.aui-bar-nav .aui-btn .aui-iconfont{color:black;}
.payList li{padding:0 10px;background: white;border-radius: 5px;height: 45px;line-height: 45px;margin-bottom: 0.9rem;}
.payList span{display: inline-block;width: 60px;height: 25px;background: #E3BB7E;color: white;border-radius: 3px;border:1px solid #D9B77A;float: left;margin-top: 10px;line-height: 25px;text-align: center;}
.payList b{color:#9B6855;margin-left: 0.8rem;float: left;}
.payList img{float: right;width:25px;height:25px;margin-top: 10px;}
.btn{
  height: 45px;width:100%;line-height: 45px;text-align: center;border-radius: 45px;color:#4C2600;background: #E5C183;margin-top: 15px;font-weight: 700;
}
.btn:active {
  background: #ccc;color:white;
}
</style>
</head>
<body>

  <section  class="aui-content-padded payList">
    <ul class="payCheck">
      
    </ul>
    <div class="btn" onclick="pay()" tapmode >立即支付</div>
  </section>
  <div id="alipay_start"></div>
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
  apiready = function(){
    api.parseTapmode();
    getData();

    $(".payCheck").on("click","li",function(){
      var checkCode = $(this).attr("checkCode");
      if(checkCode == 0){
        $('.payCheck li').removeClass('active').attr("checkCode","0").children("img").attr("src","../image/payBtn0.png");
        $(this).attr("checkCode","1").addClass('active').children("img").attr("src","../image/payBtn1.png");
      }else if(checkCode == 1){
        //$(this).attr("checkCode","0").removeClass('active').children("img").attr("src","../image/payBtn0.png");
      }
    });


  }
  function getData(){
    _loading2();
    _Ajax(window.APIServer.PayInfo,'post',{values:{}},'json',function(ret){
        _loading2_close();
        if (ret.code==1) {
            $('.payCheck').html(ret.data);
        }else{
            //do nothing
        }

    });
  }
  function pay(){
      var payitem = $('.payCheck li.active').data('payitem');
      payitem = parseInt(payitem);
      if (payitem<=0) {
        _toast('请选择要购买的项目');
        return false;
      }
      _loading('','',true);
      _Ajax(window.APIServer.AlipayH5,'post',{values:{payitem:payitem}},'json',function(ret){
        _loading_close();
        if (ret.code==1) {
            $('#alipay_start').html(ret.msg);
        }else{
            _toast(ret.msg)
        }
      });
  }
  
</script>
</html>
